{{ define "js" }}
  <script type="text/javascript" src="/js/datatables.min.js"></script>
  <script type="text/javascript" src="/js/datatable_input.js"></script>
  <script type="text/javascript" src="/js/datatable_loader.js"></script>
  <script type="text/javascript" src="/js/highcharts/highstock.min.js"></script>
  <script type="text/javascript" src="/js/highcharts/highcharts-global-options.js"></script>
  <script>
    $(document).ready(function () {
      var usp = new URLSearchParams(window.location.search)
      var q = usp.get("q")
      var tblWithdrawals = $("#withdrawals").DataTable({
        searchDelay: 0,
        processing: true,
        serverSide: true,
        ordering: false,
        stateSave: true,
        stateSaveCallback: function (settings, data) {
          data.order = []
          fetch(`/tables/${settings.sTableId}/state`, {
            method: "PUT",
            body: JSON.stringify(data),
          })
            .then((res) => res.json())
            .then(({ status, data }) => {
              if (status !== "OK") {
                console.error("error updating table state, err:", data, "status: ", status)
              }
              if (data !== "") {
                localStorage.setItem("DataTables_" + settings.sInstance, JSON.stringify(data))
              } else {
                localStorage.removeItem("DataTables_" + settings.sInstance)
              }
            })
            .catch((err) => {
              console.error("error updating table state, err: ", err)
            })
        },
        stateLoadCallback: function (settings, callback) {
          fetch(`/tables/${settings.sTableId}/state`, {
            method: "GET",
          })
            .then((res) => res.json())
            .then(({ status, data }) => {
              if (status !== "OK") {
                console.error("error loading table state, err:", data, "status: ", status)
              }
              var response = data !== "" ? data : JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
              if (q) {
                response.search.search = q
              }
              callback(response)
            })
            .catch((err) => {
              console.error("error loading table state, err: ", err)
            })
        },
        order: [[2, "desc"]],
        searching: true,
        ajax: dataTableLoader("/validators/withdrawals/data"),
        pageLength: 10,
        pagingType: "input",
        preDrawCallback: function () {
          // this does not always work.. not sure how to solve the staying tooltip
          try {
            $("#withdrawals").find('[data-toggle="tooltip"]').tooltip("dispose")
          } catch (e) {}
        },
        drawCallback: function (settings) {
          formatTimestamps("#withdrawals")
        },
        language: {
          searchPlaceholder: "Epoch, Slot, Validator, Address",
          search: "",
          paginate: {
            previous: '<i class="fas fa-chevron-left"></i>',
            next: '<i class="fas fa-chevron-right"></i>',
          },
        },
      })
      if (q) {
        tblWithdrawals.search(q)
        tblWithdrawals.draw()
      }

      var tblBLS = $("#blsChange").DataTable({
        searchDelay: 0,
        processing: true,
        serverSide: true,
        ordering: false,
        stateSave: true,
        stateSaveCallback: function (settings, data) {
          data.order = []
          fetch(`/tables/${settings.sTableId}/state`, {
            method: "PUT",
            body: JSON.stringify(data),
          })
            .then((res) => res.json())
            .then(({ status, data }) => {
              if (status !== "OK") {
                console.error("error updating table state, err:", data, "status: ", status)
              }
              if (data !== "") {
                localStorage.setItem("DataTables_" + settings.sInstance, JSON.stringify(data))
              } else {
                localStorage.removeItem("DataTables_" + settings.sInstance)
              }
            })
            .catch((err) => {
              console.error("error updating table state, err: ", err)
            })
        },
        stateLoadCallback: function (settings, callback) {
          fetch(`/tables/${settings.sTableId}/state`, {
            method: "GET",
          })
            .then((res) => res.json())
            .then(({ status, data }) => {
              if (status !== "OK") {
                console.error("error loading table state, err:", data, "status: ", status)
              }
              var response = data !== "" ? data : JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
              if (q) {
                response.search.search = q
              }
              callback(response)
            })
            .catch((err) => {
              console.error("error loading table state, err: ", err)
            })
        },
        order: [[2, "desc"]],
        searching: true,
        ajax: dataTableLoader("/validators/withdrawals/bls"),
        pageLength: 10,
        pagingType: "input",
        preDrawCallback: function () {
          // this does not always work.. not sure how to solve the staying tooltip
          try {
            $("#blsChange").find('[data-toggle="tooltip"]').tooltip("dispose")
          } catch (e) {}
        },
        drawCallback: function (settings) {
          formatTimestamps("#blsChange")
        },
        language: {
          searchPlaceholder: "Epoch, Slot, Validator, BLS Public Key",
          search: "",
          paginate: {
            previous: '<i class="fas fa-chevron-left"></i>',
            next: '<i class="fas fa-chevron-right"></i>',
          },
        },
      })

      if (q) {
        tblBLS.search(q)
        tblBLS.draw()
      }

      $(document).on("input", "#withdrawals_filter > label > input", function (ev) {
        if (ev && ev.target && ev.target.value) {
          var newUrl = window.location.pathname + "?q=" + encodeURIComponent(ev.target.value)
          q = ev.target.value
          window.history.replaceState(null, "Withdrawals", newUrl)
        } else {
          window.history.replaceState(null, "Withdrawals", window.location.pathname)
          q = ""
        }
        if (tblBLS) {
          tblBLS.search(q || "")
          tblBLS.draw()
        }
      })

      $(document).on("input", "#blsChange_filter > label > input", function (ev) {
        if (ev && ev.target && ev.target.value) {
          var newUrl = window.location.pathname + "?q=" + encodeURIComponent(ev.target.value)
          q = ev.target.value
          window.history.replaceState(null, "Withdrawals", newUrl)
        } else {
          window.history.replaceState(null, "Withdrawals", window.location.pathname)
          q = ""
        }
        if (tblWithdrawals) {
          tblWithdrawals.search(q || "")
          tblWithdrawals.draw()
        }
      })
    })
  </script>
{{ end }}
{{ define "css" }}
  <link rel="stylesheet" type="text/css" href="/css/datatables.min.css" />
{{ end }}

{{ define "content" }}
  <div class="container my-2">
    <div class="d-md-flex py-2 justify-content-md-between mb-3">
      <div class="heading">
        <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-money-bill mr-2"></i>Withdrawals</h1>
      </div>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
          <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
          <li class="breadcrumb-item"><a href="/validators" title="Validators">Validators</a></li>
          <li class="breadcrumb-item active" aria-current="page">withdrawals</li>
        </ol>
      </nav>
    </div>
    <div id="r-banner" info="{{ .Meta.Templates }}"></div>
    {{ template "withdrawalOverviewRow" .Data.Stats }}
    <h2 class="h4 my-3">
      <span class="nav-text">Processed Withdrawals</span>
    </h2>
    <div>
      {{ template "withdrawalChart" . }}
    </div>
    <div class="my-3">
      <h6 class="my-2">This table displays partial and full withdrawals. Only the first 10000 entries of the resultset are shown.</h6>
      <div class="card">
        <div class="card-body px-0 py-2">
          <div class="table-responsive pt-2">
            <table class="table" id="withdrawals">
              <thead>
                <tr>
                  <th>Epoch</th>
                  <th>Slot</th>
                  <th>Index</th>
                  <th>Validator</th>
                  <th>Time</th>
                  <th>Address</th>
                  <th>Amount</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <h2 class="h4 my-3">
      <span class="nav-text">Address Changes (BLS)</span>
    </h2>
    <div class="my-3">
      <h6 class="my-2">This table displays the BLS address changes from <span class="monospace">0x00</span> credentials to <span class="monospace">0x01</span>. Only the first 10000 entries of the resultset are shown.</h6>
      <div class="card">
        <div class="card-body px-0 py-2">
          <div class="table-responsive pt-2">
            <table class="table" id="blsChange">
              <thead>
                <tr>
                  <th>Epoch</th>
                  <th>Slot</th>
                  <th>Validator</th>
                  <th>Signature</th>
                  <th>BLS Public Key</th>
                  <th>New Withdrawal Address</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
{{ end }}
